<template>
    <div class='newinfo-container'>
        <h2 class='news_title'>{{newlistObj.title}}</h2>
        <p class='subtitle'>
            <span>发表时间：{{newlistObj.time}}</span>
            <span @click="clickNum">点击：{{newlistObj.click}}次</span>
        </p>
        <hr>
        <!-- 内容区域 -->
        <div class="content_news">
            {{newlistObj.content}}
        </div>
        <!-- 评论子组件 -->
        <comment-box></comment-box>
    </div>
</template>


<script>
import comment from './../subcomponents/comment';
import {Toast} from 'mint-ui';
// 导入子组件

export default {
    data () {
        return {
            id:this.$route.params.id,   //将url地址中传递过来的id值，挂载到data上，方便调用
            newlistObj:{}
        }
    },
    created () {
        this.getNewsInfo(this.$route.params);
    },
    methods: {
        getNewsInfo(params){
            this.$http.get('http://localhost:1000/NewList').then(result=>{
               
                result.body.forEach(element => {
                    // 如果点击的新闻id和后台的新闻数据id相同就得到该条新闻
                    if(element.id==params.id){
                        this.newlistObj=element;
                        console.log(this.newlistObj)
                    }
                });
            })
        },
       clickNum(){
           this.newlistObj.click++;
       } 
    },
    components: {
        "comment-box":comment
    }
    
}
</script>

<style lang="scss" scoped>
    .newinfo-container{
        padding: 0 4px;
        .news_title{
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
            color: red;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .subtitle{
            font-size: 14px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
        .content_news{
            color: #999;
            line-height: 25px;
            letter-spacing: 2px;
        }
    }
</style>

